<template>
  <view class="ssp-help-video" :style="{height}">
    <!-- 可帮卖筛选按钮 -->
    <view class="groupButton justify-between">
      <view
          v-for="el in filterButtons"
          :key="el.value"
          class="buttonItem"
          :class="{active:getParams.sortType===el.value}"
          @click.stop="_handleBtn(el)"
      >{{el.label}}</view>
    </view>
    <!-- 视频列表 -->
    <ScrollList
        v-if="dynamicList.length||listLoading"
        ref="scrollView"
        :minusHeight="47"
        :scrollAnimation="false"
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
    >
      <template slot="content">
        <DynamicCard
            :type="1"
            :list="dynamicList"
            :loading="listLoading"
            :skeletons="2"
            @groupBtn="_dynamicGroupBtn"
        />
      </template>
    </ScrollList>
    <!-- 缺省状态 -->
    <DefaultPage v-else-if="!dynamicList.length&&isEmpty" :minusHeight="47" :type="2" tips="暂时没有关注任何人哦～" />
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 开团成功海报 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="_shareSuccess" />
  </view>
</template>

<script>
import ScrollList from '@/components/scrollList/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'

import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"

import miniApi from '@/api/mini.js'
import release from '@/api/release.js'
import dynamicApi from '@/api/dynamic.js'
import Util from '@/api/util.js'
import {filterButtons} from './tabs'
export default {
  name: 'helpVideo',
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  components: {
    ScrollList,
    DynamicCard,
    DefaultPage,
    OpenGroupSharing,
  },
  data() {
    return {
      dynamicList: [],
      getParams: {
        currentPage: 1,
        pageSize: 10,
        type: 2,
        sortType: 1,
      }, // 筛选字段
      filterButtons, // 筛选按钮
      listMore: true, // 当前列表是否还有更多
      listLoading: true, // 加载骨架图
      isEmpty: false, // 是否显示空状态--配合dynamicList的长度使用，避免在页面一开始加载时先显示了空状态
      shareData: {}
    }
  },
  methods: {
    // 筛选按钮触发
    _handleBtn(el) {
      if (el.value === this.getParams.sortType) return

      this.listMore = true
      this.getParams.currentPage = 1
      this.getParams.sortType = el.value
      // 切换时将滚动条滚动到顶部
      this.$refs.scrollView.goToScroll(0)
      this.$refs.scrollView.loadFinish(0)
      this.dynamicList = []
      this.isEmpty = false
      this.listLoading = true
      this.getDynamics()
    },
    // 递归--获取商品列表--过滤不可帮卖的数据
    recursionGetList() {
      miniApi.getHomeDynamics(this.getParams).then(res => {
        const list = res.data.records || []
        if (this.getParams.currentPage === 1) {
          // 第一页才有骨架图
          if (this.listLoading) {
            // 隐藏骨架图标识
            setTimeout(() => {
              this.listLoading = false
            }, 250)
          }
          this.isEmpty = true
        }

        for (let i = 0, length = list.length; i < length; i++) {
          const item = list[i]
          if (item.helpSellStatus === 1) {
            this.dynamicList.push(item)
          }
        }

        // 是否有更多的标识
        const hasMore = list.length === this.getParams.pageSize
        if (!hasMore) {
          this.listMore = false
          this.$refs.scrollView.loadFinish(3,0)
        }
        const hasNext = this.dynamicList.length < this.getParams.currentPage * (list.length / 2)
        // 是否请求下一页
        if (hasMore && hasNext) {
          ++this.getParams.currentPage
          this.recursionGetList()
        }
      }).catch(err => {
        this.$refs.scrollView.loadFinish(3,0)
      })
    },
    // 获取动态视频数据
    getDynamics() {
      this.recursionGetList()
    },
    interrupt() {
      this.listMore = true
      this.getParams.currentPage = 1
      this.dynamicList = []
      this.listLoading = true
      this.isEmpty = false
      this.getDynamics()
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 400)
    },
    scrolltolower() {
      ++this.getParams.currentPage
      this.getDynamics()
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成
    },
    _dynamicGroupBtn({item, type}) {
      this.shareData.isShareType = type
      this.shareData.dynamicId = item.dynamicId
      this.shareData.type = 2
      this.shareData.title = item.title || item.content
      const canvasData = {
        userAvatar: this.$store.state.userInfo.communityLogo || this.$store.state.userInfo.avatar,// 团长头像
        userNickname: this.$store.state.userInfo.communityName || this.$store.state.userInfo.nickname,// 名字
        bgImgUrl: item.thumbnail,// 背景图片
        btnText: '立即跟团',
        salePrice: item.minSalePrice,
        type: 2, // 0动态 1开团成功,团购成功 2帮卖
        followGroupNumber: item.totalBuyCount > 0 ? Util.playvolume(item.totalBuyCount) + '人跟团中' : '一大波人赶来中'
      }
      if (item.marketPrice && item.marketPrice > 0) {
        canvasData.supplyPrice = `￥${item.marketPrice}`
      }
      release.oneKeyHelpSell({dynamicIdLv1: item.dynamicId}).then(res => {
        if (res.code === 4014) {
          // 已经帮卖过
          this.$emit('success', { code: 4014, soldForHelpSellId: res.data })
          item.loadingBtn = false
        } else if (res.code === 200) {
          this.shareData.dynamicId = res.data
          // 一键帮卖成功之后关注
          if (item.followStatus === 0) {
            dynamicApi.follow({ followAccountId: item.accountId, isFollow: 1 }).then(res => {
              if (res.code === 200) {
                item.followStatus = 1
              }
            })
          }

          this.$nextTick(() => {
            this.$refs.shareChild.shareFrends(canvasData)
          })

          setTimeout(() => {
            item.loadingBtn = false
          }, 500)
        } else {
          item.loadingBtn = false
        }
      }).catch(() => {
        item.loadingBtn = false
      })
    },
    // 海报绘制成功--开团
    _shareSuccess(res) {
      if (res.code == 200) {
        this.shareData.url = res.url
        this.$emit('success', { code: 200, ...this.shareData })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ssp-help-video {
  //height: 100%;
  .groupButton {
    padding: 16rpx 32rpx;
    background-color: #ffffff;
    .buttonItem {
      padding: 12rpx 24rpx;
      color: $n8Color;
    }
    .active {
      border-radius: 44rpx;
      background-color: $n2Color;
    }
  }
}
</style>
